'use client'

import { useState } from 'react';
import DarkModeToggle from './DarkModeToggle';
import LoginModal from './LoginModal';

export default function Navbar() {
    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);

    return (
        <>
            <nav className="fixed top-0 left-0 w-full z-50 bg-white/80 dark:bg-black/80 backdrop-blur-md flex items-center justify-center px-4 sm:px-0 h-[64px]">
                <div className="absolute left-4 sm:left-16 flex items-center gap-2 select-none">
                    {/* <img src="/globe.svg" alt="Logo" className="w-7 h-7" /> */}
                    <span className="font-extrabold text-lg tracking-tight text-black dark:text-white">luckcoder.com</span>
                </div>
                <ul className="flex gap-8 text-base items-center">
                    <li className="cursor-pointer transition-colors text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white rounded px-2 py-1">首页</li>
                    <li className="cursor-pointer transition-colors text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white rounded px-2 py-1">功能</li>
                    <li className="cursor-pointer transition-colors text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white rounded px-2 py-1">关于</li>
                </ul>
                <div className="absolute right-16 flex items-center gap-2">
                    <button 
                        onClick={() => setIsLoginModalOpen(true)}
                        className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md transition-colors hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800" 
                        aria-label="登录"
                    >
                        登录
                    </button>
                    <DarkModeToggle />
                </div>
                <button className="sm:hidden absolute right-4 flex items-center justify-center w-10 h-10 rounded-md hover:bg-black/10 dark:hover:bg-white/10 transition-colors" aria-label="菜单">
                    <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" /></svg>
                </button>
            </nav>
            <LoginModal isOpen={isLoginModalOpen} onClose={() => setIsLoginModalOpen(false)} />
        </>
    );
}